<template>
    <section class="loginContainer">
        <div class="loginInner">
            <div class="login_header">
                <h2 class="login_logo">哈哈外卖</h2>
                <div class="login_header_title">
                    <a href="javascript:;" :class="{on:isA}" @click="isA=true">短信登录</a>
                    <a href="javascript:;" :class="{on:!isA}" @click="isA=false">密码登录</a>
                </div>
            </div>
            <div class="login_content">
                <form @submit.prevent="login">
                    <div :class="{on:isA}">
                        <section class="login_message">
                            <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                            <button :disabled="!phoneRight" class="get_verification" :class="{phone_pass:phoneRight}" @click.prevent="getCode">
                                {{comTine>0? `已发送${comTine}s` : "获取验证码"}}
                            </button>
                        </section>
                        <section class="login_verification">
                            <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                        </section>
                        <section class="login_hint">
                            温馨提示：未注册哈哈外卖帐号的手机号，登录时将自动注册，且代表已同意
                            <a href="javascript:;">《用户服务协议》</a>
                        </section>
                    </div>
                    <div :class="{on:!isA}">
                        <section>
                            <section class="login_message">
                                <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                            </section>
                            <section class="login_verification">
                                <input type="password" maxlength="8" placeholder="密码" v-model="pwd" v-if="isB">
                                <input type="tel" maxlength="8" placeholder="密码" v-model="pwd" v-else>
                                <div class="switch_button "  :class="{off:isB ,on:!isB}"  @click="isB=!isB">
                                    <div class="switch_circle" :class="{moving:!isB}"></div>
                                    <span class="switch_text"></span>
                                </div>
                            </section>
                            <section class="login_message">
                                <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                                <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha" @click="getCaptcha" ref="captcha">
                            </section>
                        </section>
                    </div>
                    <button class="login_submit">登录</button>
                </form>
                <a href="javascript:;" class="about_us">关于我们</a>
            </div>
            <a href="javascript:" class="go_back" @click="$router.back()">
                <i class="iconfont icon-jiantou2"></i>
            </a>
        </div>
        <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"/>
    </section>
</template>

<script>
    import AlertTip from '../../components/AlertTip/AlertTip'
    import {reqPwdLogin, reqSendCode, reqSmsLogin,} from '../../api/interface'
    export default {
        name: "Login",

        data() {
            return {
                isA:true,     //切换登入状态效果
                phone:'',           //电话号码
                code:'',             //手机验证码
                comTine:0,             //计时器
                pwd:'',              //密码
                isB:true,             //密码状态
                captcha:'',           //数字验证码
                name:'',                //用户名
                alertShow:false,
                alertText:'',

            };
        },
        computed: {
            phoneRight (){
                return /^1[3456789]\d{9}$/.test(this.phone)
            }
        },
        methods: {
            //获取手机验证码
            async getCode() {
                if (this.comTine === 0) {
                    this.comTine = 60;
                    this.id = setInterval(() => {
                        this.comTine--;
                        if (this.comTine === 0) {
                            clearInterval(this.id)
                        }
                    }, 1000);

                    // 发送ajax请求(向指定手机号发送验证码短信)
                    const result = await reqSendCode(this.phone);
                    //失败
                    if (result.code === 1) {
                        // 显示提示
                        this.showAlert(result.msg);
                        // 停止计时
                        if (this.comTine) {
                            this.comTine = 0;
                            clearInterval(this.id);
                            this.id = undefined
                        }
                    }
                }
            },

            showAlert(alertText) {
                this.alertShow = true;
                this.alertText = alertText
            },
            // 异步登陆
            async login() {
                let res;
                // 前台表单验证
                if (this.isA) {  // 短信登陆
                    const {code,phone} = this;
                    if (!this.phoneRight) {
                        // 手机号不正确
                        this.showAlert('手机号不正确');
                        return
                    } else if (!/^\d{6}$/.test(code)) {
                        // 验证必须是6位数字
                        this.showAlert('验证必须是6位数字');
                        return
                    }
                    // 发送ajax请求短信登陆
                    res = await reqSmsLogin(phone, code)
                } else {// 密码登陆
                    const {name,pwd,captcha} = this;
                    if (!this.name) {
                        // 用户名必须指定
                        this.showAlert('用户名不能为空');
                        return

                    } else if (!this.pwd) {
                        // 密码必须指定
                        this.showAlert('密码不能为空');
                        return

                    } else if (!this.captcha) {
                        // 验证码必须指定
                        this.showAlert('验证码不能为空');
                        return
                    }
                    // 发送ajax请求密码登陆
                    res = await reqPwdLogin({name, pwd, captcha})
                }


                //发送请求后是的事情
                // 停止计时
                if (this.comTine) {
                    this.comTine = 0;
                    clearInterval(this.id);
                    this.id = undefined
                }

                if (res.code===0){
                    const user = res.data;
                    this.$store.dispatch('recordUser', user)
                    this.$router.replace('/profile');
                }else {
                    // 更改验证码
                    this.getCaptcha();
                    // 清空验证
                    this.captcha='';
                    // 显示警告提示
                    const msg = res.msg;
                    this.showAlert(msg)
                }
            },
            //确定事情初始化
            closeTip () {
                this.alertShow = false;
                this.alertText = ''
            },

            //更改图像验证码
            getCaptcha(){
                this.$refs.captcha.src="http://localhost:4000/captcha?time"+Date.now()
            }
        },
        created() {
        },
        mounted() {
        },
        components:{
            AlertTip
        },
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .loginContainer
        width 100%
        height 100%
        background #fff
        .loginInner
            padding-top 60px
            width 80%
            margin 0 auto
            .login_header
                .login_logo
                    font-size 40px
                    font-weight bold
                    color darkorange
                    text-align center
                .login_header_title
                    padding-top 40px
                    text-align center
                    >a
                        color #333
                        font-size 14px
                        padding-bottom 4px
                        &:first-child
                            margin-right 40px
                        &.on
                            color darkorange
                            font-weight 700
                            border-bottom 2px solid darkorange
            .login_content
                >form
                    >div
                        display none
                        &.on
                            display block
                        input
                            width 100%
                            height 100%
                            padding-left 10px
                            box-sizing border-box
                            border 1px solid #ddd
                            border-radius 4px
                            outline 0
                            font 400 14px Arial
                            &:focus
                                border 1px solid darkorange
                        .login_message
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .get_verification
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                border 0
                                color #ccc
                                font-size 14px
                                background transparent
                                &.phone_pass
                                   color black
                        .login_verification
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .switch_button
                                font-size 12px
                                border 1px solid #ddd
                                border-radius 8px
                                transition background-color .3s,border-color .3s
                                padding 0 6px
                                width 30px
                                height 16px
                                line-height 16px
                                color #fff
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                &.off
                                    background #fff
                                    .switch_text
                                        float right
                                        color #ddd
                                &.on
                                    background darkorange
                                >.switch_circle
                                    //transform translateX(27px)
                                    position absolute
                                    top -1px
                                    left -1px
                                    width 16px
                                    height 16px
                                    border 1px solid #ddd
                                    border-radius 50%
                                    background #fff
                                    box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
                                    transition transform .1s
                                    &.moving
                                        transform translateX(27px)
                        .login_hint
                            margin-top 12px
                            color #999
                            font-size 14px
                            line-height 20px
                            >a
                                color darkorange
                    .login_submit
                        display block
                        width 100%
                        height 42px
                        margin-top 30px
                        border-radius 4px
                        background orange
                        color #fff
                        text-align center
                        font-size 16px
                        line-height 42px
                        border 0
                .about_us
                    display block
                    font-size 12px
                    margin-top 20px
                    text-align center
                    color #999
            .go_back
                position absolute
                top 5px
                left 5px
                width 30px
                height 30px
                >.iconfont
                    font-size 20px
                    color #999
</style>
